<template>
  <a-modal title="订单详情" wrap-class-name="full-modal" width="100%" :visible="true" :footer="false" @cancel="handleCancel">
    <a-form>
      <a-form-item label="订单号">{{ state.formData.outTradeNo }}</a-form-item>
      <a-row>
        <a-col :span="8">
          <a-form-item label="顾客">{{ state.formData.customerName }}</a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="顾客手机">{{ state.formData.mobile }}</a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item label="服务门店">{{ formatStore(state.formData.storeCode) }}</a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="开单员工">{{ formatStaff(state.formData.staffCode) }}</a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="核验管理员">{{ formatStaff(state.formData.managerCode) }}</a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-form-item label="订单状态">
            <span v-if="OrderStatusEnum.TOBEPAID == state.formData.status">待支付</span>
            <span v-if="OrderStatusEnum.CANCELED == state.formData.status">已取消</span>
            <span v-if="OrderStatusEnum.PAID == state.formData.status">已支付</span>
            <span v-if="OrderStatusEnum.TOBEREFUNDED == state.formData.status">待退款</span>
            <span v-if="OrderStatusEnum.REFUNDED == state.formData.status">已退款</span>
            <span v-if="OrderStatusEnum.COMPLETED == state.formData.status">已完成</span>
            <span v-if="OrderStatusEnum.USED == state.formData.status">已使用</span>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="销售价格(元)">{{ state.formData.salePrice }}</a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="支付价格(元)">{{ state.formData.total }}</a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="支付方式">{{ state.formData.payType == '1' ? '微信支付' : '收银台' }}</a-form-item>
        </a-col>
        <a-col :span="8" v-if="state.formData.refund">
          <a-form-item label="退款">{{ state.formData.refund }}</a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="退款原因">{{ state.formData.reason || '-' }}</a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="备注">{{ state.formData.remark || '-' }}</a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="24">
         <a-form-item label="订单内容">
          <a-table :columns="formColumns" :dataSource="state.formData.form" bordered :pagination="false"></a-table>
          <div class="gray-color" style="margin-top: 8px;">* 套餐展示均摊价格，支付金额以订单总支付金额为准</div>
         </a-form-item>
        </a-col>
      </a-row>
      <a-form-item label="使用记录">
        <span v-if="!state.orderRecordList.length">-</span>
        <div v-for="(record,rIndex) in state.orderRecordList" class="record-item" :key="rIndex" >
          <div class="record-dot"></div>
          <span class="gray-color">{{ record.updateTime }} </span>
          <span class="weight-color">[{{ record.goodsCode }}]{{ record.goodsName }}</span>
           使用<span class="success-color">{{ record.useCount }}</span>次 服务人员<span class="primary-color">[{{record.staffCode}}]{{ record.staffName }}</span>
        </div>
      </a-form-item>
      <div style="text-align: right;">
        <a-button @click="handleCancel">关闭</a-button>
      </div>
    </a-form>
  </a-modal>
</template>
<script lang="ts" setup>
import { reactive, onMounted,ref,h } from 'vue';
import { OrderRecordTypes, OrderStatusEnum, PageResult, ResponseVo } from "@/type"
import { OrderService } from '@/service';
import useFormat from '@/hooks/useFormat';
const props = withDefaults(
  defineProps<{
    currentData?: any;
  }>(),
  {
    currentData: (): any => ({}),
  },
);

const state = reactive<{
  formData: any;
  orderRecordList: OrderRecordTypes.OrderRecordItem[]
}>({
  formData: {},
  orderRecordList: []
});

const {formatStore,formatStaff} = useFormat(); 

const formColumns = ref([
{ title: "商品名称", dataIndex: "goodsName" },
{ title: "套餐名称", dataIndex: "packageName" },
{ title: "销售/均摊价格", dataIndex: "salePrice" },
{ title: "支付价格", dataIndex: "payPrice" },
{ title: "购买次数", dataIndex: "count" },
{
  title: "剩余次数", dataIndex: "useCount", customRender: ({ record }: { record: OrderRecordTypes.OrderRecordItem }) => {
    return h('div', {}, record.count - record.usedCount)
  }
}
])


const emit = defineEmits<{
  (e: 'ok'): void;
  (e: 'cancel'): void;
}>();


onMounted(() => {
  state.formData = { ...props.currentData };
  getUseRecords(state.formData.outTradeNo)
});

const getUseRecords = async(outTradeNo:string)=>{
    const res:ResponseVo<PageResult<OrderRecordTypes.OrderRecordItem>>= await OrderService.orderRecordList({outTradeNo,pageNum:1,pageSize:999});
    if(res.code===0){
        state.orderRecordList = res.data.list;
    }
}

const handleCancel = () => {
  emit("cancel");
}
</script>
<style lang="less" setup>
.record-item{
  height: 40px;
  display: flex;
  gap: 8px;
  position: relative;
  padding-left: 20px;
 &::after{
  position: absolute;
  top: 10px;
  left: 5px;
  border-left: 1px dashed gray;
  width: 0px;
  height: 100%;
  content: "";
 }
}
.record-item:last-child{
  &::after{
    display: none;
  }
}

.record-dot{
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #dd524d;
  background-color: white;
  z-index: 2;
}
</style>
